<template>
  <div class="business-menu-config-container">
    <div class="page-title-container flex" :title="title">
      <a-button type="default" @click="back()">返回 </a-button>
    </div>
    <div class="page-body-container flex">
      <div class="page-body-warp">
        <a-collapse v-model="activeKey">
          <!-- 基本信息 -->
          <a-collapse-panel key="1" :show-arrow="false" title="基本信息">
            <template slot="header">
              <div class="collapse-custom-header">
                {{ activeKey.includes("1") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('1') && 'active']"
                >
                  <bj-icon-font
                    type="xl"
                    color="#0068B7"
                    :size="10"
                  ></bj-icon-font>
                </div>
              </div>
            </template>
            <div class="base-info-container">
              <a-form-model ref="ruleForm" :model="baseInfo">
                <a-row>
                  <!-- 系统编码 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="系统编码">
                      <a-input v-model="baseInfo.systemCode" disabled />
                    </a-form-model-item>
                  </a-col>
                  <!-- 系统名称 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="系统名称">
                      <a-input disabled v-model="baseInfo.systemName" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 系统类型 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="系统类型">
                      <a-input disabled v-model="baseInfo.systemTypeDesc" />
                    </a-form-model-item>
                  </a-col>
                  <!-- 更新时间 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                    <a-form-model-item label="更新时间">
                      <a-date-picker
                        v-model="baseInfo.updateTimeStr"
                        disabled
                      />
                    </a-form-model-item>
                  </a-col>
                  <!-- 系统描述 -->
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                    <a-form-model-item label="系统描述">
                      <a-input
                        disabled
                        v-model="baseInfo.systemDesc"
                        type="textarea"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
          </a-collapse-panel>

          <!-- 菜单配置信息-->
          <a-collapse-panel key="3" :show-arrow="false" title="菜单配置信息">
            <template slot="header">
              <div class="collapse-custom-header">
                {{ activeKey.includes("3") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('3') && 'active']"
                >
                  <bj-icon-font
                    type="xl"
                    color="#0068B7"
                    :size="10"
                  ></bj-icon-font>
                </div>
              </div>
            </template>
            <div class="user-config-container">
              <div class="condition-container flex">
                <div>
                  <!-- 菜单名称 -->
                  <a-input
                    v-model.trim="permissionName"
                    placeholder="请输入菜单名称"
                  />
                  <!-- 菜单类型 -->
                  <a-select
                    v-model="menuType"
                    placeholder="请选择菜单类型"
                    :loading="menuTypeLoading"
                    @change="getTableData"
                    allowClear
                  >
                    <a-select-option
                      :value="item.dicValue"
                      v-for="(item, index) in menuTypeSource"
                      :key="index"
                    >
                      {{ item.dicDesc }}
                    </a-select-option>
                  </a-select>
                  <a-button type="primary" @click="getTableData">
                    查询
                  </a-button>
                </div>
                <div class="operqte-container">
                  <a-button
                    type="primary"
                    @click="gotoMenuAdd"
                    v-if="showButton && title != '详情'"
                  >
                    新增菜单
                  </a-button>
                </div>
              </div>
              <div class="table-container">
                <vxe-table
                  class="scrollbarStyle"
                  show-overflow
                  show-header-overflow
                  show-footer-overflow
                  show-footer
                  height="430px"
                  align="center"
                  :data="table.source"
                  :column-config="{ resizable: true }"
                  ref="xTable"
                  :tree-config="{
                    rowField: 'id',
                    parentField: 'parentId',
                  }"
                >
                  <vxe-column
                    :title="item.title"
                    :field="item.key"
                    :key="index"
                    :min-width="item.width"
                    show-overflow
                    :tree-node="item.treeNode"
                    v-for="(item, index) in table.columns"
                    :align="item.align || 'center'"
                    header-align="center"
                  >
                    <template slot-scope="scope">
                      <div v-if="item.key == 'isFrame'">
                        {{ fliterFrame(scope.row) }}
                      </div>
                      <div v-else-if="item.key == 'openType'">
                        {{ fliterOpenType(scope.row) }}
                      </div>
                      <div v-else>{{ scope.row[item.key] }}</div>
                    </template>
                  </vxe-column>
                  <!-- 操作 -->
                  <vxe-column
                    title="操作"
                    :width="title == '详情' ? '160' : '300'"
                    fixed="right"
                  >
                    <template #default="{ row }">
                      <div class="text-button-group">
                        <a-button
                          type="link"
                          @click="gotoButton(row)"
                          v-if="!row.parentId && showButton && title != '详情'"
                        >
                          新增按钮
                        </a-button>
                        <a-button type="link" @click="gotoDetail(row)">
                          查看
                        </a-button>
                        <a-button
                          type="link"
                          @click="gotoEdit(row)"
                          v-if="showButton && title != '详情'"
                        >
                          编辑
                        </a-button>
                        <a-button
                          type="link"
                          class="danger"
                          v-if="row.del && showButton && title != '详情'"
                          @click="handleDelClick(row)"
                        >
                          删除
                        </a-button>
                      </div>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
    </div>
    <!-- 新增菜单 -->
    <addMenuModal
      :visible.sync="addMenuModalVisible"
      :model="model"
    ></addMenuModal>
    <!-- 新增按钮 -->
    <addBthModal
      :visible.sync="addBtnModalVisible"
      :model="model"
    ></addBthModal>
  </div>
</template>

<script>
//【菜单配置】
import addMenuModal from "./components/addMenuModal";
import addBthModal from "./components/addBthModal";
import { notificationTip } from "@/utils";
import { getDictList } from "@/api/user-center/organizationManage.js";
import { getPurView } from "@/api/user-center/userManage.js";
import {
  getBusinessDetails,
  getMenuManageList,
  getMenuDelete,
} from "@/api/user-center/businessManage.js";
export default {
  components: { addMenuModal, addBthModal },
  data() {
    return {
      //新增菜单
      addMenuModalVisible: false,
      //新增按钮
      addBtnModalVisible: false,
      loading: false,
      //
      activeKey: ["1", "2", "3", "4", "5"],
      //基本信息
      baseInfo: {
        //系统编码
        systemCode: "",
        //系统名称
        systemName: "",
        //系统类型
        systemTypeDesc: "",
        //系统描述
        systemDesc: "",
        //更新时间
        updateTimeStr: "",
      },
      //菜单名称
      permissionName: "",
      //菜单类型
      menuType: undefined,
      menuTypeSource: [],
      menuTypeLoading: false,
      //table
      table: {
        source: [],
        columns: [
          {
            title: "菜单名称",
            dataIndex: "permissionName",
            key: "permissionName",
            width: "",
            treeNode: true,
            align: "left",
          },
          {
            title: "菜单类型",
            dataIndex: "permissionTypeDesc",
            key: "permissionTypeDesc",
            width: "",
          },
          {
            title: "是否外链",
            dataIndex: "isFrame",
            key: "isFrame",
            width: "",
          },
          {
            title: "pc路由地址",
            dataIndex: "path",
            key: "path",
            width: "",
          },
          {
            title: "app路由地址",
            dataIndex: "appPath",
            key: "appPath",
            width: "",
          },
          {
            title: "应用标识",
            dataIndex: "activeRule",
            key: "activeRule",
            width: "",
          },
          {
            title: "打开类型",
            dataIndex: "openType",
            key: "openType",
            width: "",
          },
          {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
            width: "",
          },
        ],
      },
      //组件传参
      model: {
        id: "",
        text: "",
        parentId: "",
      },
      //按钮权限
      showButton: false,
      title: "",
    };
  },

  mounted() {
    let { text } = this.$route.query;
    this.title = text;
    this.getPurviewFlag();
    this.getMenuTypeList();
    this.getDetail();
    this.getTableData();
  },
  methods: {
    //查询操作权限
    getPurviewFlag() {
      getPurView()
        .then((res) => {
          this.showButton = res?.data?.result || false;
        })
        .catch((_) => {
          this.showButton = false;
        });
    },
    //查询菜单类型
    getMenuTypeList() {
      this.menuTypeLoading = true;
      getDictList({ dictKey: "permissionType" })
        .then((res) => {
          let { data } = res;
          this.menuTypeSource = data.result || [];
        })
        .catch((_) => {
          this.menuTypeSource = [];
        })
        .finally((_) => {
          this.menuTypeLoading = false;
        });
    },
    //查询详情
    getDetail() {
      let { id } = this.$route.query;
      getBusinessDetails(id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.baseInfo = {
            //系统编码
            systemCode: result.systemCode,
            //系统名称
            systemName: result.systemName,
            //系统类型
            systemTypeDesc: result.systemTypeDesc,
            //系统描述
            systemDesc: result.systemDesc,
            //更新时间
            updateTimeStr: result.updateTimeStr,
          };
        })
        .catch((_) => {})
        .finally((_) => {});
    },
    //查询列表
    getTableData() {
      let { systemCode } = this.$route.query;
      let { permissionName, menuType } = this;
      return new Promise((resolve, reject) => {
        getMenuManageList({
          systemCode,
          permissionName,
          permissionTypeValue: menuType ? menuType : "",
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.table.source = result || [];
            resolve();
          })
          .catch((_) => {
            this.table.source = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //新增菜单
    gotoMenuAdd() {
      this.model.id = "";
      this.model.text = "新增菜单";
      this.addMenuModalVisible = true;
    },
    //按钮
    gotoButton(row) {
      this.model.id = "";
      this.model.parentId = row.id;
      this.model.text = "新增按钮";
      this.addBtnModalVisible = true;
    },
    //编辑菜单
    gotoEdit(row) {
      if (row.parentId) {
        this.model.id = row.id;
        this.model.parentId = row.parentId;
        this.model.text = "编辑按钮";
        this.addBtnModalVisible = true;
      } else {
        this.model.id = row.id;
        this.model.text = "编辑菜单";
        this.addMenuModalVisible = true;
      }
    },
    //查看
    gotoDetail(row) {
      if (row.parentId) {
        this.model.id = row.id;
        this.model.parentId = row.parentId;
        this.model.text = "查看";
        this.addBtnModalVisible = true;
      } else {
        this.model.id = row.id;
        this.model.text = "查看";
        this.addMenuModalVisible = true;
      }
    },
    //删除
    handleDelClick(row) {
      let that = this;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          getMenuDelete(id)
            .then((res) => {
              notificationTip("success", "按钮删除成功！");
              that.getTableData();
            })
            .catch();
        },
        onCancel() {},
      });
    },
    //校验打开类型
    fliterOpenType(row) {
      let { openType } = row;
      switch (openType) {
        case "blank":
          return "新窗口";

        case "inner":
          return "当前窗口";

        default:
          return "-";
      }
    },
    //校验是否外链
    fliterFrame(row) {
      let { isFrame } = row;
      switch (isFrame) {
        case "0":
          return "否";

        case "1":
          return "是";

        default:
          return "-";
      }
    },
    //返回
    back() {
      this.$router.push({
        path: `/nebula/user-app/businessManage`,
      });
    },
  },
};
</script>

<style lang="less">
.business-menu-config-container {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8ebf0;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    flex-wrap: wrap;
    background: #fff;
    flex-direction: column;
    overflow: hidden;
    .page-body-warp {
      flex: 1;
      .custom-scrollbar();
    }
    .page-body-footer {
      height: 60px;
      .flex();
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .ant-collapse {
      border-radius: 0;
      border: none;
      background: #fff;
      .ant-collapse-item {
        display: flex;
        flex-direction: column;
        position: relative;
        border: none;
        border-bottom: 1px solid #e8ebf0;
        &::before {
          position: absolute;
          left: 30px;
          top: 20px;
          content: attr(title);
          font-size: 14px;
          color: #525a5d;
        }
        .ant-collapse-content-box {
          padding: 0;
        }
        .ant-collapse-header {
          padding: 0;
          margin-left: auto;
          margin-right: 30px;
          border-radius: 0;
          height: 60px;
          .flex();
          align-items: center;
          .collapse-custom-header {
            color: var(--primary-color);
            .flex();
            .icon {
              transform: scale(0.75);
              margin-left: 4px;
              transition: 0.3s;
              &.active {
                transform: scale(0.75) rotate(180deg);
              }
            }
          }
        }
        .ant-collapse-content {
          border: none;
        }
      }
    }
    .condition-container {
      flex-shrink: 0;
      .flex();
      justify-content: space-between;
      padding: 0 30px 20px 30px;
      .ant-select {
        width: 160px;
        margin-left: 16px;
      }
      .ant-input {
        width: 160px;
      }
      button {
        margin-left: 16px;
      }
    }
    //基本信息
    .base-info-container {
      padding: 0 80px 10px 20px;
      .ant-form-item {
        .flex();
        .ant-form-item-label {
          width: 130px;
          flex-shrink: 0;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          textarea {
            height: 80px;
          }
          .ant-calendar-picker {
            width: 100%;
          }
        }
      }
    }
    //用户配置信息
    .user-config-container {
      .flex();
      flex-direction: column;
      .table-container {
        flex: 1;
        .status-text {
          border-radius: 4px;
          color: #fff;
          width: 68px;
          .flex();
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          font-size: 12px;
          &.normal {
            background: #4bc964;
          }
          &.lock {
            background: #ff3f4a;
          }
          &.cancel {
            background: #f1f2f7;
            color: #aab0bc;
          }
          &.no-activate {
            background: #0098ff;
          }
        }
      }
    }
  }
}
</style>
